<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <a href="addUser.html">新增用户</a>
<table border="1" style="width: 1000px;margin: 0 auto;">
    <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>操作</th>
    </tr>
    <tr v-for="user in users">
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
        <td>{{user.age}}</td>
        <td>
            <button type="button" @click = "deleteById(user.id)">删除</button>&nbsp;&nbsp;
            <button type="button" @click = "updataById(user.id)">修改</button>
        </td>
    </tr>
</table>

</div>

<script>
    /*创建vue对象*/
    let vue = new Vue({
        el:"#app",
        data:{
            users:[]
        },
        /*在页面加载完毕以后马上执行里面的代码*/
        mounted(){
            /**
             * 发送网络请求加载后端用户数据
             *
             * JavaScript中原生 的网络请求对象
             * XMLHttpRequest XHR (小黄人)
             * var request = new XMLHttpRequest();
             * 实际开发用网络请求框架
             * axios
             *
             */

            axios.get("/user/list").then(function (response) {
                var userList = response.data.data;
                console.log(userList);
                //将响应的用户数据赋值vue
                vue.users = userList;
            })
        },
        //vue编写自定义方法的位置
        methods:{
            //删除方法
            deleteById(id){
                if(confirm("温馨提示，删除数据不可恢复，确定要删除吗？")){
                axios.get("/user/delete?id="+id).then(function (res){
                        if(res.data.code===200){
                            alert("删除成功");
                            //重新加载页面
                            location.reload();
                        }else{
                            alert(res.data.message);
                        }
                })
                }
            },
            updataById(id){
                //跳转到修改页面
                window.location.href="updataUser.html?id="+id;
            }
        }
    });

</script>
</body>
</html>
